<template>
  <div class="accountSwitch">
    <el-card
      class="item imgBox"
      v-show="!accountSwitch"
      style="min-width: 700px"
    >
      <img src="@/assets/imgs/setting/account.png" />
      <div class="hint1">您还没有开通对账功能，是否开通？</div>
      <!-- <div class="hint2">开启退款审核后，金额达到免审核上限的所有退款申请都需要进行审核。</div> -->
      <div>
        <!-- <el-button class="btnIcon" round>暂时不要了</el-button> -->
        <el-button
          type="primary"
          round
          class="btnIcon"
          @click="goCode('SMS_BUSINESS_RECONCILIATION_SWITCH', '开通')"
          >确认开通</el-button
        >
      </div>
    </el-card>
    <el-card class="item textWrap">
      <div v-show="accountSwitch">
        <span class="bigtitle" style="font-size: 20px; font-weight: bold"
          >对账功能</span
        >
        <el-switch
          :value="true"
          active-text="已开通"
          style="float: right; margin-top: 5px"
          @change="goCode('SMS_BUSINESS_RECONCILIATION_SWITCH', '关闭')"
        ></el-switch>
        <el-divider></el-divider>
      </div>
      <div class="title">什么是对账</div>
      <div>
        云尘付管理平台提供的对账功能，帮助对接了云尘付融聚交易接口的客户，确认通过融聚交易发起的交易金额，与支付渠道的结算资金是否一致。财务/运营人员，在进行交易对账时，需要在支付渠道的商户平台网页下载支付渠道「对账单」，同时在云尘付管理平台中下载《云尘付交易报表》。两份报表下载完成后，财务/运营人员使用表格处理软件，将两份报表中的交易明细逐一比对。根据比对结果，财务/运营人员可以定位哪几笔交易，导致支付渠道结算资金和已记录的交易资金不一致。在云尘付管理平台开启交易对账功能后，云尘付每日会自动完成融聚交易交易和支付渠道对账单数据的比对，向客户直接展示比对结果。
      </div>
      <div>1. 支持的支付渠道和交易类型</div>
      <div>
        目前，由支付宝、微信进行处理的支付、退款、撤销类型的交易，都可以由
        云尘付进行自动对账。支付宝、微信支持对账的支付方式见下方图例。
      </div>
      <div>2. 开启交易对账功能</div>
      <div>
        开通对账功能的第二天上午 10
        点后（根据开通支付渠道不同，对账结果显示时间可能延后），可查看到当天的对账结果。云尘付只会对开启对账开关后的融聚交易交易，每日进行自动对账；未开启对账功能前的历史交易，不进行对账处理。
      </div>
      <div>3. 查看对账结果</div>
      <div>
        当前 APP 开启交易对账功能，可在对账菜单的“对账汇总”页面，查看当前 APP
        每天的对账结果，包括当前 APP
        整体交易的对账结果，和支付宝、微信单个支付平台的对账结果。如果当天支付渠道对账单每笔交易的金额、结算总金额，和
        云尘付融聚交易每笔交易明细、交易总金额，双方记录结果都是一致的，则“对账汇总”页面展示的对账结果为“对账成功”。如果当天支付渠道对账单中有一笔或多笔交易的交易日期、交易金额等信息，和云尘付融聚交易记录的交易信息不一致，则“对账结果”页面展示的交易结果为“有差错”。当天对账结果为“有差错”，可以在操作列点击“查看差错”，进入“差错交易”菜单查看具体的差错交易信息。如果您在
        云尘付创建了多个 APP，并在这几个 APP
        中共用一套支付参数；或者有其他项目未使用云尘付融聚交易服务，并配置了当前APP的支付参数，则会在当天的对账结果中显示“有渠道交易未通过本应用发起。
      </div>
      <div>4. 查看差错交易</div>
      <div>
        差错交易菜单包括“未处理差错”和“已处理差错”两个子菜单。未处理差错菜单用于显示对账后的差错交易，供财务/运营人员查看差错交易的详细信息，并按照本公司的差错交易处理方式，以提交工单的方式，告知云尘付运维人员更新差错交易信息。由云尘付运维人员处理后的差错交易，会更新为已处理差错交易，并在“已处理差错”交易菜单进行展示。
      </div>
      <div class="title">支付对账的支付方式</div>
      <img src="@/assets/imgs/setting/alipay.png" class="img" :style="{ 'margin-right': accountSwitch ? '40px' : '0px' }"/>
      <img
        src="@/assets/imgs/setting/wechat.png"
        class="img"
      />
    </el-card>
    <el-dialog
      class="aaa"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :show-close="false"
      top="30vh"
      width="30%"
    >
      <div class="dialogText">
        <i class="el-icon-warning"></i>
        <div>
          <div class="dialogTitle">{{ innerText }}</div>
          <div class="dialogHint">
            <div>
              {{innerText=='关闭对账功能认证'?'关闭对账功能后，「对账」菜单中的数据不再比对。是否确认关闭？':'开启对账功能后，可以「对账」菜单中比对数据及报表下载。是否确认开通？' }}
            </div>
          </div>
          <!-- <div class="explain">我们将发送一条验证短信至您186****8900的手机</div>
          <div class="codeBox">
            <el-input v-model="checkCode" class="width274"> </el-input>
            <div class="codeBtn">获取验证码</div>
          </div> -->
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAccountSwitch()">取消</el-button>
        <el-button type="primary" @click="setAccountSwitch()">确定</el-button>
      </span>
    </el-dialog>
    <codeDialogVue
      codeId="8"
      :type="codeType"
      :codeDialog.sync="codeDialog"
      @codeState="codeStateFn"
    />
  </div>
</template>

<script>
import codeDialogVue from "@/components/codeDialog.vue";
import { getUserInfo} from "@/utils/public";

export default {
  name: "settingAccountSwitch",
  components: {
    codeDialogVue,
  },
  data() {
    return {
      codeItem: "",
      codeType: "",
      codeDialog: false,
      visible: false,
      checkCode: "",
      innerText: "",
      accountSwitch: false,
      paramAccountSwitch: true,
    };
  },
  created() {
    this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
      if (res.code === "0000") {
        this.accountSwitch = res.data.accountSwitch;
        this.innerText = res.data.accountSwitch
          ? "关闭对账功能认证"
          : "开通对账功能认证";
      }
    });
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if(this.$route.name==this.$options.name){
          this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
          if (res.code === "0000") {
            this.accountSwitch = res.data.accountSwitch;
            this.innerText = res.data.accountSwitch
              ? "关闭对账功能认证"
              : "开通对账功能认证";
          }
        });
        }
      },
    },
    deep: true,
  },
  methods: {
    getUserInfo,
    codeStateFn(val) {
      if (val) {
        if (this.codeItem == "开通") {
          this.confirmOpen();
        } else {
          this.confirmClose();
        }
      }
    },
    goCode(val, item) {
        if(getUserInfo().checkFlag){
          if (item == "开通") {
            this.confirmOpen();
          } else {
            this.confirmClose();
          }
        }else{
          this.codeType = val;
        this.codeItem = item;
        this.codeDialog = true;
        }
      },
    cancelAccountSwitch() {
      this.visible = false;
      this.checkCode = "";
      this.paramAccountSwitch === true ? false : false;
    },
    confirmOpen() {
      this.paramAccountSwitch = true;
      this.visible = true;
      this.checkCode = "";
    },
    confirmClose() {
      this.paramAccountSwitch = false;
      this.visible = true;
      this.checkCode = "";
    },
    queryMemberInfo() {
      this.$http.get("/api/merchant/memberbase/getMemberBase").then((res) => {
        if (res.code === "0000") {
          this.accountSwitch = res.data.accountSwitch;
          this.innerText = res.data.accountSwitch
            ? "关闭对账功能认证"
            : "开通对账功能认证";
        }
      });
    },
    setAccountSwitch() {
      this.$http
        .post(
          `/api/merchant/memberbase/switchAccount`,
          {
            switchFlag: this.paramAccountSwitch,
            checkCode: this.checkCode,
          }
        )
        .then((res) => {
          this.visible = false;
          if (res.code === "0000") {
            this.queryMemberInfo();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.accountSwitch {
  display: flex;
  .item {
    img {
      width: 650px;
      height: 411px;
    }
  }
  .imgBox {
    text-align: center;
    width: 60%;
    padding-top: 100px;
    .hint1 {
      font-size: 16px;
      font-weight: 600;
      color: #4f595f;
      margin-top: 40px;
      margin-bottom: 12px;
    }
    .hint2 {
      color: #869daa;
    }
    .btnIcon {
      width: 318px;
      height: 50px;
      font-size: 14px;
      border-radius: 35px;
      margin: 40px 0;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
  .textWrap {
    flex: 1;
    margin-left: 20px;
    color: #4f595f;
    padding: 0 20px 20px;
    text-align: justify;
    line-height: 22px;
    .title {
      font-size: 16px;
      font-weight: 500;
      color: #1d1c1c;
    }
    div {
      margin-top: 20px;
    }
    .label_ {
      color: #25b5d9;
      margin-left: 28px;
    }
    .img {
      width: 608px;
      height: 170px;
      margin: 20px 0px;
    }
  }
  .dialogText {
    display: flex;
    .dialogTitle {
      font-size: 18px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
    .dialogHint {
      color: rgba(0, 0, 0, 0.65);
      line-height: 22px;
      margin-top: 12px;
    }
    .explain {
      font-size: 14px;
      margin-bottom: 10px;
      margin-top: 30px;
    }
    .width274 {
      width: 274px;
    }
    .codeBox {
      display: flex;
    }
    .codeBtn {
      width: 132px;
      height: 32px;
      background: #25b5d9;
      border-radius: 0px 4px 4px 0px;
      text-align: center;
      line-height: 32px;
      color: #ffffff;
      cursor: pointer;
    }
  }
  :deep(.el-dialog__wrapper) {
    .el-dialog__header .aaa {
      padding: 0;
    }
    .el-icon-warning {
      font-size: 18px;
      color: #faad14;
      margin-top: 3px;
      margin-right: 17px;
    }
  }
  :deep(.el-dialog) {
    border-radius: 16px;
  }
  :deep(.el-dialog__body) {
    padding: 20px 30px;
    padding-bottom: 20px;
  }
}
</style>
